<template>
	<!-- 实名认证 -->
	<view class="authentication" v-if="isIdnumber === false">
		<view class="tips">身份信息（必填）</view>
		<view class="authentication_box">
			<view class="pw_col border">
				<view class="col-1">姓名</view>
				<view class="col-2">
					<input class="uni-input pw-input" v-model="userName" placeholder="真实姓名" />
				</view>
			</view>
			<view class="pw_col border">
				<view class="col-1">身份证号</view>
				<view class="col-2">
					<input class="uni-input pw-input" v-model="Idnumber" placeholder="身份证号码" />
				</view>
			</view>
		</view>

		<view class="authentication_box" style="margin-top: 40rpx">
			<view class="Idnumber">
				<view class="col-1">身份证正面</view>
				<view class="col-2" @click="upImg(1)">
					<view class="img" v-if="img1">
						<image :src="img1" mode="aspectFill"></image>
					</view>
					<view class="" v-else>
						+
					</view>
				</view>
			</view>
			<view class="Idnumber">
				<view class="col-1">身份证反面</view>
				<view class="col-2" @click="upImg(2)">
					<view class="img" v-if="img2">
						<image :src="img2" mode="aspectFill"></image>
					</view>
					<view class="" v-else>
						+
					</view>
				</view>
			</view>
		</view>
		<view class="tips2">
			<text></text>
			<text>系统智能加密，实施保障您的信息安全</text>
		</view>
		<view class="button_box" @click="subData">
			<view class="button">立即提交</view>
		</view>
	</view>
	<view class="authentication" v-if="isIdnumber === true">
		<view class="tips">身份信息</view>
		<view class="authentication_box">
			<view class="text">
				<view class="col-1">姓名</view>
				<view class="col-2">{{initData.real_name}}</view>
			</view>
			<view class="text">
				<view class="col-1">身份证号</view>
				<view class="col-2">{{initData.id_card}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/api/request.js';
export default {
	data() {
		return {
			userName: '',
			Idnumber: '',
			img1 : '',
			img2 : '',
			isIdnumber: false ,// 是否存在身份信息
			initData : {}
		};
	},
	onLoad(option) {
		this.getAuthentication();
	},
	methods: {
		// 查询
		async getAuthentication(){
			let data = await request.post('/api/user/realname');
			if(data.code === 1){
				this.initData = data.data;
				if(this.initData && this.initData.id_card){
					this.isIdnumber = true;
				}else {
					this.isIdnumber = false;
				}
			}
		},
		// 提交
		async subData(){
			let real_name = this.userName;
			let id_card = this.Idnumber;
			let img1 = this.img1;
			let img2 = this.img2;
			if(real_name == '' || id_card == '' || img1 == '' || img2 == ''){
				uni.showToast({
					title: '请填写完整信息',
					duration: 2000,
					icon:'none'
				});
				return;
			}
			let data = await request.post('/api/user/idExamine',{
				real_name,
				id_card,
				img1,
				img2,
			});
			if(data.code === 1){
				uni.showToast({
					title: data.msg,
					duration: 2000,
					icon:'none'
				});
				uni.switchTab({
					url: '/pages/mine/mine'
				});
			}
		},
		upImg(index) {
			let _self = this;
			let userData = uni.getStorageSync('userData');
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: function (res) {
					uni.showLoading({
						title: '上传中...'
					});
					//获得选择好的文件,就算只有一个文件也是数组
					const tempFilePaths = res.tempFilePaths;
					//第二步:把选择的文件上传到服务器
					const uploadTask = uni.uploadFile({
						url: 'https://api.ztougj.cc/api/common/upload', //后端接口url
						filePath: tempFilePaths[0],
						name: 'file', //和后端接口需要的参数名一致
						header : {
							token : userData.token
						},
						success: (res) => {
							uni.hideLoading();
							let data = JSON.parse(res.data);
							if(data.code === 1){
								if(index === 1){
									// 正面
									_self.img1 = '';
									_self.img1 = data.data.fullurl;
								}else {
									// 反面
									_self.img2 = '';
									_self.img2 = data.data.fullurl;
								}
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.authentication {
	padding: 0rpx 40rpx;
	.tips {
		color: #999999;
		font-size: 20rpx;
		padding: 20rpx 0;
	}
	.authentication_box {
		background-color: #ffffff;
		border-radius: 16rpx;
		.pw_col {
			height: 110rpx;
			display: flex;
			align-items: center;
			.col-1 {
				width: 140rpx;
				color: #212121;
				margin-left: 20rpx;
			}
			.col-2 {
				padding-right: 10rpx;
				flex: 1;
				.pw-input {
					width: 100%;
				}
			}
		}
		.text {
			height: 110rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 20rpx;
			.col-2 {
				color: #999999;
				font-size: 28rpx;
			}
		}
		.Idnumber {
			.col-1 {
				padding: 20rpx 20rpx 0 20rpx;
			}
			.col-2 {
				color: #999999;
				height: 250rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.img {
					width: 100%;
					height: 250rpx;
					padding: 10rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			
		}
	}
	.tips2 {
		display: flex;
		justify-content: center;
		color: #999999;
		font-size: 20rpx;
		margin-top: 30rpx;
	}
	.button_box {
		height: 90rpx;
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		background: linear-gradient(#e0bc84, #d5a96e);
		color: #ffffff;
	}
}
</style>
